<template>
	<!-- 去结算 -->
	<view class="">
		<!-- 未授权时 -->
		<view class="shopping shopping2" v-if="!Info.id">
			<view class="shopping_bg2">
				<view class="shopping2_title">
					<view class="shopping2_img">
						<image src="../../static/home/cart2.png" mode="heightFix" style="width: 160rpx;height: 160rpx;">
						</image>

						<view class="shopping2_unm">
							0
						</view>
					</view>


					<view class="shopping2_txt">
						<view class="">
							<text class="Price_sty1">合计</text>
							<text class="Price_sty2">￥0</text>
						</view>

						<view class="delivery">
							免费配送
						</view>
					</view>
				</view>
				<view class="shopping2_arrdess">
					去结算
				</view>
			</view>
		</view>

		<!-- 去结算 -->
		<view class="shopping shopping2" v-else @click="toggle()">
			<view class="shopping_bg2">
				<view class="shopping2_title">
					<view class="shopping2_img">
						<image src="../../static/home/Group2.png" mode="heightFix"
							style="width: 160rpx;height: 160rpx;">
						</image>

						<view class="shopping2_unm">
							{{cartNum}}
						</view>

					</view>

					<view class="shopping2_txt">
						<view>
							<text class="Price_sty1">合计</text>
							<text class="Price_sty2">￥{{this.form.cartTotalPrice/100 || 0}}</text>
						</view>
						<view class="delivery">
							优惠减：￥100.00
						</view>
					</view>
				</view>
				<view class="shopping2_arrdess shopping2_arrdess_bgc">
					去结算
				</view>

			</view>
		</view>

		<uni-popup ref="popup" type="bottom" @change="onPopChange">
			<view class="popup-content">
				<view class="header_title">
					<view class="cart">
						购物车
					</view>
					<view class="cart_x" @click="toggle">
						x
					</view>
				</view>

				<view class="goods_centent">
					<view class="header_cent">
						<evan-checkbox v-model="Allchecked" v-if="form.cartItemVOList.length>0" :iconSize="14"
							primary-color="#FE2C55" @change="onallChange"><text class="your-class">
								<image src="@/static/home/cart1.png" mode="aspectFill" class="cart_icon1"
									style="margin-left: 22rpx;"></image>
								{{strotData.title}}
							</text>
						</evan-checkbox>
						<view v-else class="cartDisabled">
							<image src="@/static/home/cartDisabled.png" mode="widthFix"></image>
							<image src="@/static/home/cart1.png" mode="aspectFill" class="cart_icon1"
								style="margin-left: 22rpx;"></image>
							{{strotData.title}}
						</view>

						<view class="header_del" @click="delDialogOpen('all')" v-if="form.cartItemVOList.length>0">
							<image src="@/static/home/del1.png" mode="aspectFill" class="cart_icon"></image>
							清空
						</view>
					</view>

					<view class="uni-list">
						<view class="list">
							<evan-checkbox-group v-if="form.cartItemVOList.length >0" ref="cGroup"
								@change="onGroupChange" v-model="color4" :btnClickAutoReset="false">
								<view class="evan-checkbox-show__group-item"
									v-for="(item, index) in form.cartItemVOList" :key="index">
									<next-swipe-action :btnGroup="btnGroup" :index="index"
										@btnClick="delDialogOpen(item)">
										<view class="che_box" :class="item.selectStatus ==0?'':'mask_xiajia' ">

											<view class="mask_OffShelf">

											</view>

											<evan-checkbox :iconSize="14" v-if="item.selectStatus==0"
												primary-color="#FE2C55" :label="item.goodsId" class="rongqi">
											</evan-checkbox>

											<view class="empty-chk" v-else>
												<image src="@/static/home/cartDisabled.png" mode="widthFix"></image>
											</view>

											<view class="cart_box" :class="index==0?'mg-0':''">
												<view class="cb_img">
													<image :src="item.PhotosImg" mode="aspectFill" class="cb_img_sty">
													</image>

													<view v-if="item.selectStatus !=0"
														:class="item.selectStatus ==0?'':'mask_OImg' "
														class="cb_img_sty">
														<image src="@/static/home/Removed.png" class="mask-img"></image>
													</view>
												</view>
												<view class="cb_box">
													<view class="cb_title">
														{{item.goodsName}}
													</view>

													<view class="cb_flex">
														<view class="cb_price">
															<cn-money :money="item.price/100"
																color="#FE2C55"></cn-money>

															<view class="discount">
																第一件￥200.00
															</view>
														</view>

														<view class="cb_price_totole" v-if="item.selectStatus==0">
															<image src="@/static/home/del3.png" mode="aspectFill"
																@tap="editNum(item,-1)" class="cart_icon"></image>
															<text class="num">{{item.count}}</text>
															<image src="@/static/home/add3.png" mode="aspectFill"
																class="cart_icon" @tap="editNum(item,1)"></image>
														</view>
													</view>
												</view>
											</view>
										</view>
									</next-swipe-action>


									<!-- 去结算 -->
									<view class="shopping shopping2 shopping3">
										<view class="shopping_bg2 shopping_bg3">
											<view class=" shopping2_title">
												<view class="shopping2_img">
													<image src="../../static/home/Group2.png" mode="heightFix"
														style="width: 160rpx;height: 160rpx;">
													</image>

													<view class="shopping2_unm">
														{{ toatalNum}}
													</view>
												</view>

												<view class="shopping2_txt">
													<view>
														<text class="Price_sty1">合计</text>
														<text class="Price_sty2">￥{{totalPrice/100}}</text>
													</view>

													<view class="delivery">
														优惠减：￥100.00
													</view>
												</view>
											</view>
											<view class="shopping2_arrdess shopping2_arrdess_bgc"
												@click.stop="onSubmit">
												去结算
											</view>
										</view>
									</view>
								</view>
							</evan-checkbox-group>

							<view class="cartEmpty" v-else>
								<view class="cart-wrap">
									<image src="@/static/home/cart-empty.png" mode="widthFix"></image>
								</view>
								<view class="cart-goods-title">
									暂无商品
								</view>

								<view class="cart-goods-text">
									挑点好物，装满购物车吧
								</view>


								<!-- 去结算 -->
								<view class="shopping shopping2 shopping3">
									<view class="shopping_bg2 shopping_bg3">
										<view class=" shopping2_title">
											<view class="shopping2_img">
												<image src="../../static/home/Group2.png" mode="heightFix"
													style="width: 160rpx;height: 160rpx;">
												</image>

												<view class="shopping2_unm">
													{{ toatalNum}}
												</view>
											</view>

											<view class="shopping2_txt">
												<view class="">
													<text class="Price_sty1">合计</text>
													<text class="Price_sty2">￥{{totalPrice/100}}</text>
												</view>
											</view>
										</view>
										<view class="shopping2_arrdess shopping2_arrdess_bgc" @click.stop="onSubmit">
											去结算
										</view>
									</view>
								</view>

							</view>

						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 商品过期 -->
		<uni-popup ref="expire" background-color="#fff" borderRadius="24rpx 24rpx 24rpx 24rpx" @change="onExpireChange">
			<view class="EP-wrap">
				<view class="ep-title">
					所选商品含有已下架商品 请重新选择商品
				</view>

				<view class="ep-img">
					<image src="@/static/home/cart-empty1.png" mode="widthFix" class="wrap-sty"></image>
				</view>

				<view class="EP-btn" @click="onRemove">
					确定
				</view>
			</view>
		</uni-popup>

		<!-- 删除提示框 -->
		<u-overlay :show="modalShow" @click="modalShow = false">
			<view class="warp">
				<view class="followConfirm">
					<view class="txt">
						{{delTitle}}
					</view>
					<view class="btnGroup">
						<view class="btn cancel" @click="modalShow = false">
							取消
						</view>
						<view class="btn confirm" @click="delDialoConfirm">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		queryUserCart,
		updateCart,
		removeCart,
		appConfirm
	} from "@/api/apis.js"
	import {
		accAdd,
		accMul,
	} from "@/utils/common.js"
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		name: "cart-model",
		data() {
			return {
				delBtnWidth: 160,
				isScroll: true,
				status: 2,
				popupShow: false,
				Allchecked: false, //默认为false
				delStatus: '', //购物车判断状态
				modalShow: false,
				delTitle: "确定要删除全部商品吗？", //提示文本、
				color4: [],
				form: {
					storeName: "", //店铺名称
					totalNum: "", //总数量
					cartTotalPrice: "", //总价
					cartItemVOList: []
				},

				toatalNum: 0, //下单时购物车选中数量
				totalPrice: 0, //下单时购物车选中总价
				cartNum: 0, //购物车总数

				btnGroup: [{
						name: '删除',
						action: 'del',
						style: {
							bgColor: '#ff4d4f'
						}
					},

				],

				strotData: {}, //店铺信息
			};
		},

		created() {
			this.onSearch()
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},


		computed: {
			...mapState("userInfo", ["Info", 'storeId', 'storeForm']),
		},
		methods: {
			...mapMutations('userInfo', ["setGoodsList"]),

			//跳转到预发下单界面
			onSubmit() {
				let ids = this.color4;
				let list = this.form.cartItemVOList
				if (ids.length == 0) {
					uni.showToast({
						title: '请先勾选商品',
						icon: 'none',
						duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
						mask: false, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
						// image:'./image.png',//自定义图标的本地路径
					});
					return
				}
				let params = {
					"goodsIds": ids,
					"storeId": this.storeId,
					"customerId": this.Info.id

				}
				appConfirm(params).then(res => {
					let cartItemVOList = res.result.cartItemVOS || []
					for (var i = 0; i < cartItemVOList.length; i++) {
						cartItemVOList[i].PhotosImg = JSON.parse(cartItemVOList[i]
							.goodsPhotos)[0]
					}
					if (res.success) {
						let data = {
							goodsList: cartItemVOList,
							toatalNum: res.result.totalNum,
							storeName: res.result.storeName,
							totalPrice: res.result.cartTotalPrice, //下单时购物车选中总价
							isSelect: res.result.isSelect, //下单时购物车选中总价
						}
						this.setGoodsList(data)
						this.$emit('submit')
					} else {
						uni.showToast({
							title: '创建预订单失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: false, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}
				})
			},

			toggle(type) {
				this.color4 = []
				if (this.popupShow == false) {
					this.revolution()
					this.onSearch()
					// 触发弹出
					this.$refs.popup.open(type)
				} else {
					// 关闭弹出
					this.$refs.popup.close()
				}
			},

			// 关闭弹窗
			onHideModel() {
				this.revolution()
				this.$refs.popup.close()
			},


			// 造反干掉所以赋值参数
			revolution() {
				this.Allchecked = false
				console.log('清空所以赋值参数', this.Allchecked);
				this.toatalNum = 0 //下单时购物车选中数量
				this.totalPrice = 0 //下单时购物车选中总价
				this.cartNum = 0 //购物车总数
			},

			onPopChange(e) {
				this.popupShow = e.show
				if (this.popupShow == false) {
					//关闭弹出 
					// uni.showTabBar()
					// 关闭时.重新获取购物车数量信息
					this.onSearch()
					this.$emit('getgoods')
				} else {
					// 触发弹出
					// uni.hideTabBar()
				}
			},

			// 改变数量
			editNum(item, num) {
				console.log(item);
				item.count = item.count + num
				if (item.count <= 0) {
					uni.showModal({
						title: '购物车提醒',
						content: '是否移除该商品？',
						cancelColor: "#aaaaaa",
						confirmColor: "#FE2C55",
						success: (res) => {
							if (res.confirm) {
								this.updateNum(item)
								let cartItemVOList = [...this.form.cartItemVOList]
								let index = cartItemVOList.findIndex(i => i.goodsId == item.goodsId)
								cartItemVOList.splice(index, 1);
								this.form.cartItemVOList = [...cartItemVOList]
								this.checkAll() //  更新勾选状态
							} else if (res.cancel) {
								item.count++
							}
						}
					});
				} else {
					this.updateNum(item)
				}

			},


			// 购物车-数量变化-接口
			updateNum(item) {
				let params = {
					customerId: this.Info.id,
					goodsId: item.goodsId,
					num: item.count,
					storeId: this.storeId,
				}
				updateCart(params).then(res => {
					if (this.color4.length > 0) {
						this.checkAll()
					}
				})
			},

			// 单选
			onGroupChange(e) {
				if (e.length == this.form.cartItemVOList.length) {
					this.Allchecked = true
				} else {
					this.Allchecked = false
				}

				this.checkAll()
			},

			// 全选/反选
			onallChange(e) {
				if (e) {
					this.$refs.cGroup.selectAll()
				} else {
					this.$refs.cGroup.clearAll()
				}
				this.checkAll()
			},

			// 提取勾选商品
			checkAll() {
				let ids = this.color4;
				let list = this.form.cartItemVOList
				// 使用 map 和 find 提取对应的项  
				const result = ids.map(id => {
					return list.find(obj => obj.goodsId === id);
				}).filter(obj => obj !== undefined); // 过滤掉未找到的项（即undefined）  

				let totalPrice = 0;
				let toatalNum = 0;
				for (var i = 0; i < result.length; i++) {
					totalPrice += accMul(result[i].count, result[i].price)
					toatalNum += result[i].count
				}
				this.totalPrice = totalPrice
				this.toatalNum = toatalNum
			},

			// 删除前提示
			delDialogOpen(status) {
				this.delStatus = status
				this.modalShow = true;
				if (status == 'all') {
					this.delTitle = "确定要删除全部商品吗"
				} else {
					this.delTitle = "确定不要了吗？"
				}

			},

			delDialoConfirm() {
				if (this.delStatus == 'all') {
					this.clearAll()
				} else {
					this.delItem(this.delStatus)
				}
			},

			dialogClose() {

			},

			// 清空-购物车
			clearAll() {
				this.$refs.cGroup.clearAll()
				this.Allchecked = false
				let params = {
					"customerId": this.Info.id,
					"removeStatus": 1, //0 根据商品id删除 1 清空购物车
					"storeId": this.storeId
				}
				removeCart(params).then(res => {
					if (res.success) {
						this.onSearch()
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: false, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
						this.$emit('getgoods')
					}

				})
			},

			// 清空单个购物车商品
			delItem(item) {
				let params = {
					"customerId": this.Info.id,
					"removeStatus": 0, //0 根据商品id删除 1 清空购物车
					"storeId": this.storeId,
					goodsIds: [item.goodsId]
				}

				removeCart(params).then(res => {
					if (res.success) {
						this.onSearch()
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: false, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}

				})
			},

			// 查询购物车数据
			onSearch() {
				let strotData = this.storeForm.filter(item => {
					if (item.id == this.storeId) {
						return item
					}
				})
				this.strotData = strotData[0] //当前店铺信息
				let params = {
					customerId: this.Info.id,
					storeId: this.storeId,
				}
				if (!this.Info.id) return false
				queryUserCart(params).then(res => {
					this.form = res.result
					let cartItemVOList = res.result.cartItemVOList || []
					for (var i = 0; i < cartItemVOList.length; i++) {
						cartItemVOList[i].PhotosImg = JSON.parse(cartItemVOList[i]
							.goodsPhotos)[0]
					}
					let cartNum = 0
					if (res.result.cartItemVOList != null) {
						cartNum = res.result.cartItemVOList.reduce((accumulator, currentValue) => {
							return accumulator + currentValue.count;
						}, 0); // 初始值为0  
					} else {
						cartNum = 0
					}

					// 判断是否存在==过期商品
					if (res.result.isSelect && this.popupShow) {
						this.onExpireChange() //二次弹窗，判断当前购物车内是否包含国企商品
					}
					// console.log(this.form, this.popupShow);
					this.form.cartItemVOList = cartItemVOList
					this.cartNum = cartNum
				})
			},

			// 二次弹窗，判断当前购物车内是否包含国企商品
			onExpireChange() {
				this.$refs.expire.open('center')
			},

			// 清除过期商品
			onRemove() {
				this.$refs.expire.close()
			},

		},
	}
</script>

<style lang="scss" scoped>
	// tabs切换
	.scan_icon {
		width: 37rpx;
		height: 37rpx;
		border-radius: 0px 0px 0px 0px;
	}

	// 结算
	.shopping {
		width: 686rpx;
		height: 96rpx;
		position: fixed;
		z-index: 10;
		bottom: 100rpx;
		// #ifdef APP-PLUS
		bottom: calc(120rpx + constant(safe-area-inset-bottom));
		bottom: calc(120rpx + env(safe-area-inset-bottom));
		// #endif


		// #ifdef H5
		bottom: calc(150rpx + constant(safe-area-inset-bottom));
		bottom: calc(150rpx + env(safe-area-inset-bottom));
		// #endif

		left: calc(50% - 343rpx);

		.shopping_title {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: left;
			font-style: normal;
			text-transform: none;
			display: flex;
			align-items: center;

			.shopping_txt {
				margin-left: 10rpx;
				font-weight: 500;
				font-size: 28rpx;
			}
		}

		.shopping_arrdess {
			width: 160rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			text-align: center;
			line-height: 60rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #444444;
		}
	}

	.shopping2 {
		height: 96rpx;
	}

	.shopping3 {
		// #ifdef APP-PLUS
		bottom: calc(0rpx + constant(safe-area-inset-bottom));
		bottom: calc(130rpx + env(safe-area-inset-bottom));
		// #endif

		// #ifdef H5
		bottom: calc(100rpx + constant(safe-area-inset-bottom));
		bottom: calc(100rpx + env(safe-area-inset-bottom));
		// #endif
	}

	.shopping_bg1 {
		width: 100%;
		height: 100%;
		border-radius: 56rpx;
		box-sizing: border-box;
		background-color: #444444;
		padding: 0 16rpx 0 28rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shopping_bg2 {
		width: 100%;
		height: 100%;
		border-radius: 56rpx;
		box-sizing: border-box;
		// padding-right: 20rpx;
		box-shadow: 0px 0px 24rpx 0px rgba(0, 0, 0, 0.12);
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.shopping2_title {
			display: flex;
			align-items: center;
		}

		.shopping2_img {
			position: relative;
			margin-top: -22rpx;
			width: 132rpx;

			.shopping2_unm {
				position: absolute;
				top: 40rpx;
				right: -2rpx;
				width: 32rpx;
				height: 32rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
				background: $uni-color-theme;
				border-radius: 50%;
			}
		}

		// 金额
		.shopping2_txt {
			margin-left: 20rpx;

			.Price_sty1 {
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				line-height: 24rpx;
			}

			.Price_sty2 {
				font-weight: bold;
				font-size: 35rpx;
				color: #333333;
				margin-left: 5rpx;
				line-height: 36rpx;
			}

			.delivery {
				font-weight: 400;
				font-size: 20rpx;
				color: #808080;
				line-height: 20rpx;
				margin-top: 12rpx;
			}
		}

		// 结算
		.shopping2_arrdess {
			color: #FFFFFF;
			text-align: center;
			font-style: normal;
			text-transform: none;

			width: 168rpx;
			height: 96rpx;
			line-height: 96rpx;
			background: #828282;
			border-radius: 0px 60rpx 60rpx 0px;
		}

		.shopping2_arrdess_bgc {
			background: $uni-color-theme;
		}
	}

	.shopping_bg3 {
		box-shadow: 0px 0px 24rpx 0px rgba(0, 0, 0, 0.1);
		border: 1rpx solid #ccc;
	}

	.popup-content {
		height: 70vh;
		background: #fff;
		padding: 24rpx;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;

		.header_title {
			display: flex;
			justify-content: space-between;

			.cart {
				font-weight: 400;
				font-size: 28rpx;
				color: #262626;
			}

			.cart_x {
				position: absolute;
				top: -10rpx;
				right: 0;
				padding: 20rpx;
				// border: 1px solid #ccc;
				font-size: 25rpx;
			}
		}

		.goods_centent {

			.header_cent {
				padding: 0 18rpx;
				margin-top: 36rpx;
				margin-bottom: 36rpx;
				display: flex;
				justify-content: space-between;

				.cartDisabled {
					display: flex;
					align-items: center;

					image {
						height: 52rpx;
						width: 52rpx;
					}
				}

				// 店铺图标
				.cart_icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 4rpx;
				}

				.cart_icon1 {
					width: 24rpx !important;
					height: 24rpx !important;
					margin-right: 4rpx;
				}

				.header_del {
					padding: 0 20rpx;
					// border: 1px solid #ccc;
					color: #898989;
					font-weight: 400;
					font-size: 24rpx;
					display: flex;
					align-items: center;
				}
			}



			.cart_page {
				width: 100%;
				height: 100%;
				min-height: 100vh;
				background-color: #F2F2F2;
				overflow: auto;
			}

			.bottom {
				position: fixed;
				bottom: 0;
				left: 0;
				height: 100rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 0 25rpx;
				background-color: #ffffff;
				border-top: #cccccc;
				box-shadow: 0 0 12rpx #f1f1f1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.totalPrice {
						color: #666666;
						font-size: 28rpx;

						text {
							color: #0CA8E1;
							font-size: 32rpx;
						}
					}
				}

				.submitOrder {
					width: 200rpx;
					border-radius: 70rpx;
					height: 70rpx;
					line-height: 70rpx;
					color: #ffffff;
					text-align: center;
					font-size: 28rpx;
					background-color: #0CA8E1;
				}
			}


			.list {
				padding: 20rpx;
				/* #ifdef APP-PLUS */
				height: 630rpx;
				/* #endif */

				/* #ifndef APP-PLUS */
				height: 752rpx;
				/* #endif */
				overflow-y: auto;

				::v-deep .evan-checkbox-show__group-item {
					position: relative;
					margin-top: 20rpx;
				}

				::v-deep .evan-checkbox-show__group-item:nth-child(1) {
					margin-top: 0rpx;
				}

				.che_box {
					width: 100%;
					display: flex;
					position: relative;
					background-color: #FFFFFF;
					transition: all 0.2s;
					align-items: center;

					.empty-chk {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}


					// 容器
					.cart_box {
						margin-left: 30rpx;
						width: -webkit-fill-available;
						// margin-top: 48rpx;
						padding-bottom: 32rpx;
						border-bottom: 2rpx solid #F2F2F2;

						display: flex;

						.cb_img {
							position: relative;
							width: 112rpx;
							height: 112rpx;
							border-radius: 8rpx;

							.cb_img_sty {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}


						}

						.cb_flex {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.cb_price {
								display: flex;
								flex-direction: column;

								.discount {
									margin-top: 12rpx;
									padding: 8rpx 12rpx;
									font-weight: 500;
									font-size: 20rpx;
									color: #FD6E04;
									background: rgba(252, 156, 54, 0.24);
									border-radius: 8rpx 8rpx 8rpx 8rpx;
									line-height: 20rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
								}
							}

							.cb_price_totole {
								display: flex;
								justify-content: space-around;
								align-items: center;

								.num {
									margin: 0 18rpx;
								}

								.cart_icon {
									width: 32rpx;
									height: 32rpx;
								}
							}
						}

					}


					.mg-0 {
						margin-top: 0;
					}

					// 文本容器
					.cb_box {
						margin-left: 20rpx;
						flex: 1;

						.cb_title {
							font-weight: 400;
							font-size: 28rpx;
							color: #262626;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.cb_flex {
							margin-top: 32rpx;
						}
					}
				}


				.mask_xiajia {
					position: relative;
					height: 100%;
					width: 100%;

					.mask_OffShelf {
						position: absolute;
						height: 100%;
						width: 100%;
						z-index: 3;
						top: 0;
						left: 0;
						background: rgba(255, 255, 255, 0.6);
					}

					.mask_OImg {
						top: 0;
						left: 0;
						z-index: 1;
						height: 100%;
						width: 100%;

						.mask-img {
							position: absolute;
							top: 0;
							left: 0;
							z-index: 6;
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}
				}

				.cartEmpty {
					margin-top: 40rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.cart-wrap {
						width: 261rpx;
						height: 240rpx;

						image {
							height: 100%;
							width: 100%;
						}
					}

					.cart-goods-title {
						margin-top: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #161823;
					}

					.cart-goods-text {
						margin-top: 20rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(22, 24, 35, 0.6);
					}
				}
			}

			.number {
				text {
					width: 50rpx;
					line-height: 50rpx;
					text-align: center;
					display: inline-block;
					background-color: #f1f1f1;
					margin-right: 5rpx;
				}

				.add {
					color: #0CA8E1;
					margin-right: 20rpx;
				}

				.num {
					color: #666666;
					width: 70rpx;
				}
			}

		}

	}

	.your-class {
		font-size: 24rpx !important;
	}

	// 包含下架商品
	.EP-wrap {
		width: 578rpx;
		height: 696rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		text-align: center;

		.ep-title {
			margin: 0 auto;
			margin-top: 60rpx;
			width: 440rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 40rpx;
			color: #262626;
			line-height: 56rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.ep-img {
			margin-top: 80rpx;

			image {
				width: 240rpx;
				height: 240rpx;
				;
			}
		}

		.EP-btn {
			margin: 0 auto;
			margin-top: 80rpx;
			width: 498rpx;
			height: 84rpx;
			background: $uni-color-theme;
			border-radius: 16rpx;
			font-size: 32rpx;
			display: flex;
			color: #fff;
			justify-content: center;
			align-items: center;
		}



	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		z-index: 9;

		.followConfirm {
			width: 70%;
			// height: 250rpx;
			padding: 45rpx 45rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;

			.txt {
				text-align: center;
				margin-bottom: 45rpx;
			}

			.btnGroup {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				.btn {
					padding: 18rpx 0rpx;
					border-radius: 35rpx;
					border: 0;
					font-size: 26rpx;
					width: 46%;
					text-align: center;
				}

				.cancel {
					background-color: #EDEDED;
					color: #4D4D4D;
				}

				.confirm {
					background-image: linear-gradient(to right, #FF4C6E, #FE2C55);
					color: #fff;
				}
			}
		}
	}
</style>